<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="baidu-site-verification" content="Xijgc2YO5y">
	<meta name="baidu-site-verification" content="Qj80ZohAkr">
	<meta name="google-site-verification" content="N-bPfRy2yUxAuOVKpn0Gm7BOygzI_faxwpAUQq0T8xw">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Leeves在 Github 上的个人博客">
    <meta name="keyword" content="Leeves">
    <meta name="theme-color" content="#600090">
    <meta name="msapplication-navbutton-color" content="#600090">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#600090">
    <link rel="shortcut icon" href="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png">
    <link rel="alternate" type="application/atom+xml" title="Leeves" href="/atom.xml">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css">
    <title>
        
        Vue入门以及前端工程化｜Leeves&#39;s blog
        
    </title>

    <link rel="canonical" href="https://leevsee.github.io/2019/03/31/Vue入门以及前端工程化/">

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/blog-style.css">

    <!-- Pygments Github CSS -->
    <link rel="stylesheet" href="/css/syntax.css">
	<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
</head>

<style>

    header.intro-header {
        background-image: url('http://cdn.pcbeta.attachment.inimc.com/data/attachment/forum/201205/15/232126llvvucjetunjn8g2.jpg')
    }
</style>
<!-- hack iOS CSS :active style -->
<body ontouchstart="" class="animated fadeIn">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top " id="nav-top" data-ispost = "true" data-istags="false
" data-ishome = "false" >
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand animated pulse" href="/">
                <span class="brand-logo">
                    Leeves
                </span>
                's Blog
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <!-- Known Issue, found by Hux:
            <nav>'s height woule be hold on by its content.
            so, when navbar scale out, the <nav> will cover tags.
            also mask any touch event of tags, unfortunately.
        -->
        <!-- /.navbar-collapse -->
        <div id="huxblog_navbar">
            <div class="navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/">Home</a>
                    </li>

                    
                        
                    
                        
                        <li>
                            <a href="/Others/">Others</a>
                        </li>
                        
                    

                </ul>
            </div>
        </div>
    </div>
    <!-- /.container -->
</nav>
<script>
    // Drop Bootstarp low-performance Navbar
    // Use customize navbar with high-quality material design animation
    // in high-perf jank-free CSS3 implementation
//    var $body   = document.body;
    var $toggle = document.querySelector('.navbar-toggle');
    var $navbar = document.querySelector('#huxblog_navbar');
    var $collapse = document.querySelector('.navbar-collapse');

    $toggle.addEventListener('click', handleMagic)
    function handleMagic(e){
        if ($navbar.className.indexOf('in') > 0) {
        // CLOSE
            $navbar.className = " ";
            // wait until animation end.
            setTimeout(function(){
                // prevent frequently toggle
                if($navbar.className.indexOf('in') < 0) {
                    $collapse.style.height = "0px"
                }
            },400)
        }else{
        // OPEN
            $collapse.style.height = "auto"
            $navbar.className += " in";
        }
    }
</script>

<!-- Main Content -->

<!--only post-->


<img class="wechat-title-img"
     src="http://lixin.piaozu.com.cn/postPicture.jpg">


<style>
    
    header.intro-header {
        background-image: url('http://lixin.piaozu.com.cn/postPicture.jpg')
    }

    
</style>

<header class="intro-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 text-center">
                <div class="post-heading">
                    <h1>Vue入门以及前端工程化</h1>
                    
                    <span class="meta">
                         作者 Leeves
                        <span>
                          日期 2019-03-31
                         </span>
                    </span>
                    <div class="tags text-center">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="post-title-haojen">
        <span>
            Vue入门以及前端工程化
        </span>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">
            <!-- Post Container -->
            <div class="col-lg-8 col-lg-offset-1 col-sm-9 post-container">
                <p>目录<br>　　引言<br>　　阅读对象<br>　　1.背景<br>　　2.如何实现<br>　　3.架构演变<br>　　4.框架介绍<br>　　5.实战<br>　　6.结束语  </p>
<hr>
<h4 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h4><p>　　在好几年前，刚开始写JAVA的时候，MVC大行其道，大部分的业务都集中在后台，虽是后端开发的萌新，但也免不了要编写JSP代码，那时候公司也有前端，恩，就是那种前端：喂喂喂，那个切图的，把页面写好就发给研发工程师套模板吧。<br>　　后来，因为某些关系，在移动端开发方向越走越远，从Android到hybrid App、微信公众号到微信小程序等，时代在变换，而前端也逐步从切图仔演变成了前端工程化。<br>　　最近在做项目的时候，发现还是有很多后端开发人员只注重后端开发，对前端工程化了解甚少，前端代码风格各异，缺少统一管理。于是乎，萌生了本文的初衷。</p>
<h4 id="阅读对象"><a href="#阅读对象" class="headerlink" title="阅读对象"></a>阅读对象</h4><p>本文初衷是写给从未了解过前端工程的后端人员，同时也合适热衷于追求新技术、探索新工具的人。特此声明：本文以实战的形式，去解释前端工程化的理念，本文不涉及Vue基础，如果读者读完对Vue有兴趣，可以自行查看Vue基础语法。本文假设读者已经掌握了HTML和CSS，并且熟悉JavaScrpt基础知识。</p>
<hr>
<h3 id="1-背景"><a href="#1-背景" class="headerlink" title="1. 背景"></a>1. 背景</h3><p>现在(以前，本来打算写以前)很多中小型公司，没有前端工程化的还很多，使用Booststrap和JQuery就可以搞定一切。直接把Html+CSS+JS写好了就行了，简单粗暴。但是随着时间的推移，尤其是周期长的项目，代码越写越多，以前的老代码要改，又得加入新代码，问题就体现出来了：</p>
<ul>
<li>代码臃肿和人员变动，导致新手上手时间长</li>
<li>代码风格各异，可读性差，维护难</li>
<li>无用js和css代码多，浏览器加载慢</li>
<li>无统一工具，优化成本高</li>
</ul>
<p>要解决以上问题，就必须把前端开发工程化起来。前端工程化是根据业务特点，将前端开发流程规范化，标准化，它包括了开发流程，技术选型，代码规范，构建发布等，用于提升前端工程师的开发效率和代码质量。主要是从规范、组件化和模块化以及构建和编译三个层次去实现。</p>
<hr>
<h3 id="2-如何实现"><a href="#2-如何实现" class="headerlink" title="2. 如何实现"></a>2. 如何实现</h3><h4 id="2-1-开发规范"><a href="#2-1-开发规范" class="headerlink" title="2.1 开发规范"></a>2.1 开发规范</h4><p>开发规范的目的是统一团队成员的编码规范，便于团队协作和代码维护。开发规范没有统一的标准，每个团队可以建立自己的一套规范体系。比如WEB工程规范、EOS工程规范、iOS工程规范以及测试工程规范等。<br>而JavaScript的开发规范，尤其是在ES6越来越普及的局面下，保持良好的编码风格是非常必要的。我们可以在代码提交的过程中加入代码检查机制，如eslint，tslint等等，进行代码规范。</p>
<h4 id="2-2-模块-组件化开发"><a href="#2-2-模块-组件化开发" class="headerlink" title="2.2 模块/组件化开发"></a>2.2 模块/组件化开发</h4><p>模块是模块（module），组件是组件（component），两者不能混为一谈。模块注重的是对属性的封装，重点在于设计和开发阶段，可将代码拆解为独立且通用的代码单元。组件是一个独立的单元，侧重产品的功能性，也就是功能单元，其意义偏向运行时的结构，并有更复杂的控制，组件可由各种模块组成。</p>
<h5 id="2-2-1-模块"><a href="#2-2-1-模块" class="headerlink" title="2.2.1 模块"></a>2.2.1 模块</h5><p>历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。因此，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，通过export/import对模块进行导出导入，成为浏览器和服务器通用的模块解决方案。</p>
<h5 id="2-2-1-组件"><a href="#2-2-1-组件" class="headerlink" title="2.2.1 组件"></a>2.2.1 组件</h5><p>组件和模块概念上是类似，通常根据功能、业务进行代码划分。组件是可复用实例，可单独运行，具有业务逻辑。在前端架构中，一个页面通常由一个或多个组件组成，每个组件又可包含模块。</p>
<h5 id="2-2-1-必要性"><a href="#2-2-1-必要性" class="headerlink" title="2.2.1 必要性"></a>2.2.1 必要性</h5><p>模块/组件化开发的核心思想是分治，主要针对的是开发和维护阶段。模块/组件化开发有以下有点：</p>
<ul>
<li>高内聚，低耦合</li>
<li>作用域独立</li>
<li>可自由组合</li>
<li>接口规范化</li>
<li>拆分复杂度，易于维护和重构</li>
<li>作用域独立</li>
</ul>
<h4 id="2-3-构建-amp-编译"><a href="#2-3-构建-amp-编译" class="headerlink" title="2.3 构建&amp;编译"></a>2.3 构建&amp;编译</h4><p>构建和编译并不是同一个概念，有人喜欢叫构建，有人喜欢叫编译。构建是build，值把源代码进行编译、压缩、打包等一系列操作，最终产出可以直接上线的资源。编译是compile，你可以看到，编译只是构建的一个部分。  </p>
<p>在前端工程化中，构建和编译都可以称为构建阶段。为什么需要构建工具？因为目前浏览器版本种类繁多，尤其是如果我们使用ES6语法、CSS预编译器或者其他插件的时候，并不能保证我们在开发的时候直接编写的源码在宿主浏览器上正确无误地运行，这时候就需要构建工具对源码进行构建编译，构建工具包括以下功能：</p>
<ul>
<li>代码审查</li>
<li>预编译</li>
<li>依赖打包</li>
<li>资源嵌入</li>
<li>文件压缩</li>
</ul>
<p>通过构建工具对源码进行编译，打包成合适的格式以供浏览器使用。</p>
<hr>
<h3 id="3-架构演变"><a href="#3-架构演变" class="headerlink" title="3. 架构演变"></a>3. 架构演变</h3><p>传统的Web应用中，每个新视图（Html页面）都在服务端构建，需要与服务端交互。</p>
<p><img src="" alt="传统web应用"> </p>
<p>SPA应用，则是把视图创建和管理从后端分离出来，移到表现层。相比传统的web应用，具有高效，对服务器压力很小，消耗更少的带宽，能够与面向服务的架构更好地结合等优点。</p>
<p><img src="" alt="SPA应用"> </p>
<hr>
<h3 id="4-框架介绍"><a href="#4-框架介绍" class="headerlink" title="4.框架介绍"></a>4.框架介绍</h3><h4 id="4-1-Vue"><a href="#4-1-Vue" class="headerlink" title="4.1 Vue"></a>4.1 Vue</h4><p>为什么使用Vue？这个网上有很多讨论，我只说比较重要的几点：1、目前使用最多的前端框架之一，说明有良好的生态。2、对于后端人员更友好，容易掌握。3、向下兼容，不需要另外转换编译，可以直接引用，便于单个页面使用。  </p>
<p>Vue是什么？是开源的一个渐进式框架。对于不熟悉前端的开发人员来说，跟他们说像JQuery。</p>
<blockquote>
<p>在过去的十年时间里，我们的网页变得更加动态化和强大了。多亏有Javascript，我们已经把很多传统的服务端代码放到了浏览器中，这样子就产生了成千上万行的Javascript代码。它们连接了各式各样的HTML和CSS文件，但缺乏正规的组织形式。这也是为什么越来越多的开发者使用Javascript框架。诸如Aagular、React和Vue这样的。Vue是一款友好的、多用途且高性能的Javascript框架，它能够帮你创建可维护性和可测试性更强的代码库。Vue是渐进式的Javascript框架，也就是说如果你已经有了一个现成的服务端应用，你可以将Vue作为该应用的一个部分嵌入其中，带来更丰富的交互体验。或者如果你希望将更多业务逻辑放到前端来实现。那么Vue的核心库以其生态系统，也可以满足你的各式需求。<br>和其他前端框架一样，Vue允许你将一个网页分割成可复用组件。每个组件都包含属于自己的HTML CSS Javascript，以用来渲染网页中相应的地方。<br>如果我们构建一个大型的应用，在这一点上，我们可能需要将东西分隔成为各自的组件和文件。Vue甚至有一个命令行工具，使快速初始化一个真实的工程变得非常简单，我们甚至可以使用Vue的单文件组件，它包含了各自的HTML Javascript以及带作用域的CSS或SCSS。</p>
</blockquote>
<h4 id="4-2-Vue-Cli"><a href="#4-2-Vue-Cli" class="headerlink" title="4.2 Vue-Cli"></a>4.2 Vue-Cli</h4><p>Vue-Cli的一个命令行工具，能够快速初始化工程，构建前端应用。Vue-Cli可以方便的添加其生态系统的插件，集成了前端生态中最好的工具，拥有完全图形化的创建和管理 Vue.js 项目的用户界面。Vue-Cli依赖Node.js运行环境，而Node.js实质是对Chrome V8引擎进行了封装，所以如果要使用Vue-Cli需要安装Node.js。（后端的小伙伴不理解的话，我举个不恰当的比喻，Vue-Cli有点像Spring boot，是个脚手架。Node.js相当于Java环境。我们可以通过mavne为Spring boot添加lombok、commons-lang等插件，同理我们也通过Vue-Cli也可以为其添加相应的插件）</p>
<h4 id="4-3-相关生态"><a href="#4-3-相关生态" class="headerlink" title="4.3 相关生态"></a>4.3 相关生态</h4><p>下面列举常用的Vue生态插件:</p>
<ul>
<li>Vue Router：路由管理器。控制界面的跳转</li>
<li>Vuex：状态管理模式。存储管理应用的所有组件的状态。</li>
<li>SSR：服务器端渲染。主要用于SEO，搜索引擎爬虫抓取等。</li>
<li>Prerendering：预渲染。更快的到达时间，优化首次加载，也可以用于SEO优化。</li>
</ul>
<p>除了这几个外，还有UI框架，PC端的UI框架有：Element、iView、vuetify。移动端的UI框架有：Cube-Ui、Vant、Mint、Vux等。通过这些开源的UI框架可以非常方便的让你快速构建页面。</p>
<hr>
<h3 id="5-实战"><a href="#5-实战" class="headerlink" title="5.实战"></a>5.实战</h3><p>本章节通过搭建一个webapp的栗子，不涉及具体代码编写，主要展示vue开发部署流程。</p>
<h4 id="5-1-安装环境"><a href="#5-1-安装环境" class="headerlink" title="5.1 安装环境"></a>5.1 安装环境</h4><ol>
<li>安装Node.js环境。去<a href="https://nodejs.org/" target="_blank" rel="noopener">Node.js官网</a>下载安装包。安装完毕后，打开命令行，查看Node.js版本：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">node -v</span><br></pre></td></tr></table></figure>
<p><img src="" alt="node版本"> </p>
<p>(此步骤对应Java来说，是安装Java环境)</p>
<ol start="2">
<li>安装Vue-Cli。打开命令行，输入：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm i -g @vue/cli</span><br></pre></td></tr></table></figure>
<p>等待安装完毕后，查看vue版本：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">vue -V</span><br></pre></td></tr></table></figure>
<p><img src="" alt="vue版本"> </p>
<p>(此步骤对应Java来说，是安装Spring Initializr)</p>
<h4 id="5-2-创建项目"><a href="#5-2-创建项目" class="headerlink" title="5.2 创建项目"></a>5.2 创建项目</h4><ol>
<li>创建名为：vue-cli3-demo的项目</li>
</ol>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">vue create vue-cli3-demo</span><br></pre></td></tr></table></figure>
<p>(此步骤对应Java来说，通过Spring Initializr来创建spring boot项目)</p>
<ol start="2">
<li>安装Vue插件，接下来Vue-Cli会让你手动选择还是默认选择配置，这里我们选择手动配置。</li>
</ol>
<p><img src="" alt="vue cli3"> </p>
<p>这步，让你选择哪些插件：（空格选中，回车下一步）<br>这次Demo我们选择Babel，Router，Vuex。<br>Babel：js转换器，用于ES6，ES7，转换成浏览器识别的语言<br>Router：控制页面的跳转<br>Vuex：状态管理模式(写完这篇文章才发现，这个demo用不上。。。)<br>还有其他的插件，我来简单介绍一下：<br>TypeScript：支持TypeScript（让JavaScript变成强语言）<br>PWA：<br>CSS Pre-processors：支持Sass、LESS和Stylus<br>Linter / Formatter：代码规范检查（简单来说，你JS代码写的不标准会报错）<br>Unit Testing、E2E Testing：单元测试  </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">Check the features needed for your project:</span><br><span class="line"> (*) Babel</span><br><span class="line"> ( ) TypeScript</span><br><span class="line"> ( ) Progressive Web App (PWA) Support</span><br><span class="line"> (*) Router</span><br><span class="line">&gt;(*) Vuex</span><br><span class="line"> ( ) CSS Pre-processors</span><br><span class="line"> ( ) Linter / Formatter</span><br><span class="line"> ( ) Unit Testing</span><br><span class="line"> ( ) E2E Testing</span><br></pre></td></tr></table></figure>
<p><img src="" alt="vue cli3 features"> </p>
<p>是否使用history路由模式，选择否。这里我们选择hash模式，关于Hash和Histroy的区别，特性不同，使用场景不同，这里就不过多展开。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)</span><br></pre></td></tr></table></figure>
<p><img src="" alt="vue cli3 router mode"> </p>
<p>是否使用单独的配置文件，选择是。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)</span><br><span class="line">&gt; In dedicated config files</span><br><span class="line">  In package.json</span><br></pre></td></tr></table></figure>
<p>保存以上配置，选择否（输入N）</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">Save this as a preset for future projects?</span><br></pre></td></tr></table></figure>
<p><img src="" alt="preset"> </p>
<p>最后等待安装依赖完成</p>
<p><img src="" alt="vue cli3 complete"> </p>
<p>(此步骤对应Java来说，在Spring Initializr初始化spring boot项目时，选择哪些依赖等信息)</p>
<h6 id="其项目结构如下："><a href="#其项目结构如下：" class="headerlink" title="其项目结构如下："></a>其项目结构如下：</h6><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">├── .git					git仓库的文件夹</span><br><span class="line">├── node_modules		依赖文件夹</span><br><span class="line">├── public				静态资源文件</span><br><span class="line">├── src					项目源码目录    </span><br><span class="line">│   ├── assets				资源目录</span><br><span class="line">│   │   └── logo.png</span><br><span class="line">│   ├── components			公共组件目录</span><br><span class="line">│   │   └── HelloWorld.vue</span><br><span class="line">│   └── views					页面目录</span><br><span class="line">│       ├── About.vue</span><br><span class="line">│       └── Home.vue</span><br><span class="line">│   ├── App.vue				根组件</span><br><span class="line">│   ├── main.js				入口js文件</span><br><span class="line">│   ├── router.js				路由文件</span><br><span class="line">│   ├── store.js 				Vuex文件</span><br><span class="line">├── .browserslistrc			浏览器css兼容配置</span><br><span class="line">├── .gitignore				git忽略提交规则</span><br><span class="line">├── babel.config.js			babel转换配置</span><br><span class="line">├── package.json			依赖文件表(有点像pom.xml)</span><br><span class="line">├── package-lock.json		配合package.json下载具体依赖</span><br><span class="line">├── postcss.config.js		css处理配置</span><br><span class="line">├── README.md			README</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>运行项目  </li>
</ol>
<p>进入vue-cli3-demo目录，输入命令：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm run serve</span><br></pre></td></tr></table></figure>
<p><img src="" alt="npm run serve"> </p>
<p>打开浏览器，输入地址即可看到项目运行：</p>
<p><img src="" alt="browser"> </p>
<p>(此步骤对应Java来说，在spring boot项目中启动SpringBootApplication类来运行项目)</p>
<h4 id="5-3-开发-amp-打包"><a href="#5-3-开发-amp-打包" class="headerlink" title="5.3 开发&amp;打包"></a>5.3 开发&amp;打包</h4><p>本章节不着重于具体代码编写，通过编写一个小栗子，来介绍目录结构和开发打包环节</p>
<p>本章需要实现的内容是：向coframe发送登陆和查询用户的请求。</p>
<p>工欲善其事必先利其器，有一款好的ide可以让我们更好的注重编码，本本使用的是VS Code。其次，要向coframe发送HTTP请求，就需要为Vue添加HTTP库。其次，我们也需要一些UI库（而且类似EOS的NUI），进行快速开发，因此选择如下：</p>
<ul>
<li>IDE：VS Code（Sublime、Webstorm、Atom、HBuilder都行，哪个顺手用哪个）</li>
<li>HTTP库：axios</li>
<li>UI库：cube-ui （除此，移动端库还有Vant、Mint、Vux等）</li>
</ul>
<ol>
<li>安装HTTP库和UI库</li>
</ol>
<p>打开命令行：分别安装HTTP库和UI库</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">vue add cube-ui</span><br></pre></td></tr></table></figure>
<p><img src="" alt="cube-ui"> </p>
<p>同理，输入</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">vue add axios</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>编写代码</li>
</ol>
<p>安装完成后，我们添加按钮，编写发送登陆和查询请求代码，并运行项目。</p>
<p><img src="" alt="npm run serve"></p>
<ol start="3">
<li>测试</li>
</ol>
<p>点击登录按钮，请求成功。</p>
<p><img src="" alt="test login"></p>
<p><img src="" alt="test getUser"></p>
<p>至此，表示Vue与coframe对接成功。</p>
<ol start="4">
<li>打包</li>
</ol>
<p>输入打包命令：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure>
<p><img src="" alt="npm run build"></p>
<p>打包完成后，我们在dist目录下，可以看到编译打包好的文件。</p>
<p><img src="" alt="build files"></p>
<h4 id="5-4-部署"><a href="#5-4-部署" class="headerlink" title="5.4 部署"></a>5.4 部署</h4><p>从开发阶段打包的dist目录，需要启动一个http服务器来访问。也就是说，既可以把打包好的文件放在EOS项目的页面资源下面，也可以单独部署。</p>
<ul>
<li>后端部署方式</li>
</ul>
<p>以spring boot为例  </p>
<ol>
<li>把打包的文件放在资源目录下。</li>
</ol>
<p><img src="" alt="spring boot resources"></p>
<ol start="2">
<li>运行浏览器便可</li>
</ol>
<ul>
<li>单独部署方式</li>
</ul>
<p>通常才用nginx方式。如果有tomcat，也可以放在tomcat里面部署。其他web服务器，比如IIS，同理。这里就不做展开了，可自行查询资料。</p>
<p><img src="" alt="nginx"></p>
<p>至此，开发部署整套流程演示完毕。</p>
<hr>
<h3 id="6-结束语"><a href="#6-结束语" class="headerlink" title="6. 结束语"></a>6. 结束语</h3><p>我们通过上述例子，初步了解了Vue使用和构建。这只是其中一小部分，通过简单介绍以小见大，达到以下效果：</p>
<p><img src="" alt="values"></p>
<blockquote>
<p>PS：在多平台通用性方面：使用Vue编写的webapp可以打包成两端APP，也可以转换成微信公众号，微信小程序，支付宝小程序等多平台。</p>
</blockquote>
<p>demo链接，还需要么-。-</p>

                <hr>
                
                <!-- 多说 Share start -->
                <div class="ds-share"
                     style="text-align: right"
                     data-thread-key="2019/03/31/Vue入门以及前端工程化/"
                     data-title="Vue入门以及前端工程化"
                     data-url="https://leevsee.github.io/2019/03/31/Vue入门以及前端工程化/"
                     data-images=""
                     data-content="目录　　引言　　阅读对象　　1.背景　　2.如何实现　　3.架构演变　　4.框架介绍　　5.实... | Leeves&#39;s blog ">
                    <div class="ds-share-inline">
                        <ul class="ds-share-icons-16">
                            <li data-toggle="ds-share-icons-more"><a class="ds-more" href="#">分享到：</a></li>
                            <li><a class="ds-wechat flat" href="javascript:void(0);" data-service="wechat">微信</a></li>
                            <li><a class="ds-weibo flat" href="javascript:void(0);" data-service="weibo">微博</a></li>
                            <li><a class="ds-douban flat" href="javascript:void(0);" data-service="douban">豆瓣</a></li>
                        </ul>
                        <div class="ds-share-icons-more">
                        </div>
                    </div>
                    <hr>
                </div>
                <!-- 多说 Share end-->
                

                <ul class="pager">
                    
                    <li class="previous">
                        <a href="/2019/11/17/getPrimaryKey实现/" data-toggle="tooltip" data-placement="top"
                           title="getPrimaryKey实现">&larr; Previous Post</a>
                    </li>
                    
                    
                    <li class="next">
                        <a href="/2018/07/30/spring-boot-mybatis-dynamic-datasource/" data-toggle="tooltip" data-placement="top"
                           title="spring boot mybatis dynamic datasource">Next Post &rarr;</a>
                    </li>
                    
                </ul>

                
                <!-- 多说评论框 start -->
                <div class="comment">
                    <div class="ds-thread"
                         data-thread-key="2019/03/31/Vue入门以及前端工程化/"
                         data-title="Vue入门以及前端工程化"
                         data-url="https://leevsee.github.io/2019/03/31/Vue入门以及前端工程化/">
                    </div>
                </div>
                <!-- 多说评论框 end -->
                

                

            </div>

            <div class="hidden-xs col-sm-3 toc-col">
                <div class="toc-wrap">
                    <ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#引言"><span class="toc-text">引言</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#阅读对象"><span class="toc-text">阅读对象</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-背景"><span class="toc-text">1. 背景</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-如何实现"><span class="toc-text">2. 如何实现</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-1-开发规范"><span class="toc-text">2.1 开发规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-2-模块-组件化开发"><span class="toc-text">2.2 模块/组件化开发</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#2-2-1-模块"><span class="toc-text">2.2.1 模块</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-2-1-组件"><span class="toc-text">2.2.1 组件</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-2-1-必要性"><span class="toc-text">2.2.1 必要性</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-3-构建-amp-编译"><span class="toc-text">2.3 构建&amp;编译</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-架构演变"><span class="toc-text">3. 架构演变</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-框架介绍"><span class="toc-text">4.框架介绍</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-1-Vue"><span class="toc-text">4.1 Vue</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-2-Vue-Cli"><span class="toc-text">4.2 Vue-Cli</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-3-相关生态"><span class="toc-text">4.3 相关生态</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-实战"><span class="toc-text">5.实战</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#5-1-安装环境"><span class="toc-text">5.1 安装环境</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-2-创建项目"><span class="toc-text">5.2 创建项目</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#其项目结构如下："><span class="toc-text">其项目结构如下：</span></a></li></ol></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-3-开发-amp-打包"><span class="toc-text">5.3 开发&amp;打包</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-4-部署"><span class="toc-text">5.4 部署</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-结束语"><span class="toc-text">6. 结束语</span></a>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Sidebar Container -->

            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                sidebar-container">

                <!-- Featured Tags -->
                
                <section>
                    <!-- no hr -->
                    <h5 class="text-center">
                        <a href="/tags/">FEATURED TAGS</a>
                    </h5>
                    <div class="tags">
                        
                    </div>
                </section>
                

                <!-- Friends Blog -->
                
                <div style="margin-top: 20px;">
                    <h5 class="text-center">FRIENDS</h5>
                    <ul class="list-inline text-center">
                        
                        <li><a href="https://leevsee.github.io/#">lixin</a></li>
                        
                    </ul>
                </div>
                
            </div>
        </div>

    </div>
</article>


<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
    // dynamic User by Hux
    var _user = 'leeves';

    // duoshuo comment query.
    var duoshuoQuery = {short_name: _user};
    (function () {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';
        ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0]
        || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
</script>
<!-- 多说公共JS代码 end -->





<!-- Footer -->
<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 text-center">
                <br>
                <ul class="list-inline text-center">
                
                
                    <li>
                        <a target="_blank" href="https://twitter.com/lxsweety">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                
                

                

                
                    <li>
                        <a target="_blank" href="https://www.facebook.com/lxsweety">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                

                
                    <li>
                        <a target="_blank"  href="https://github.com/Leevsee">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                

                

                </ul>
                <p class="copyright text-muted">
                    Copyright &copy; Leeves 2019
                    <br>
                    <span id="busuanzi_container_site_pv" style="font-size: 12px;">PV: <span id="busuanzi_value_site_pv"></span> Times</span>
                    <br>
                    Theme by <a href="http://kaijun.rocks/hexo-theme-huxblog/" style=" color:#666; font-size:8px;">Kaijun</a>
                </p>

            </div>
        </div>
    </div>
</footer>

<!-- jQuery -->
<script src="/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="/js/blog.js"></script>

<!-- async load function -->
<script>
    function async(u, c) {
      var d = document, t = 'script',
          o = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      o.src = u;
      if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
      s.parentNode.insertBefore(o, s);
    }
</script>

<!-- jquery.tagcloud.js -->
<script>
    // only load tagcloud.js in tag.html
    if($('#tag_cloud').length !== 0){
        async("https://leevsee.github.io/js/jquery.tagcloud.js",function(){
            $.fn.tagcloud.defaults = {
                //size: {start: 1, end: 1, unit: 'em'},
                color: {start: '#bbbbee', end: '#0085a1'},
            };
            $('#tag_cloud a').tagcloud();
        })
    }
</script>

<!--fastClick.js -->
<script>
    async("//cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js", function(){
        var $nav = document.querySelector("nav");
        if($nav) FastClick.attach($nav);
    })
</script>

<!-- Google Analytics -->



<!-- Baidu Tongji -->


<!-- swiftype -->
<script type="text/javascript">
  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
  })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');

  _st('install','null','2.0.0');
</script>

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<!--wechat title img-->
<img class="wechat-title-img" src="http://lixin.piaozu.com.cn/icon1.jpg">
</body>

</html>
